<!DOCTYPE html>
<html ng-app="MyAPP">
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
        }
    </style>
</head>
<body>

 <div class="container">
     <div class="row">
         <nav class="navbar navbar-default navbar-static-top">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <a class="navbar-brand" href="../index.html">首页</a>
                 </div>
                 <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0)">Link</a></li>
                    <li><a href="javascript:void(0)">Link2</a></li>
                 </ul>
             </div>
         </nav>
     </div>
     <div class="row demo">
         <h2>Demo2: 自动补全示例-城市查询</h2>
         <div ng-controller="MyCtrl">
             <autocomplete items="citys" model="keyword" default-value="请输入城市名" choosed="chooseCallback(name)"></autocomplete>
             <h3 class="text-center" style="font-weight:bold;font-size:32px;color:tomato;">{{result}}</h3>
         </div>
     </div>
 </div>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script type="text/ng-template" id="mytemplate">
        <h4 class="text-left">自定义自动补全指令</h4>
        <div class="form-group">
            <input type="text" ng-model="model" class="form-control" ng-keydown="ifChooseShow=true" placeholder="{{def}}">
            <div class="list-group" ng-show="ifChooseShow && model">
                <a href="" hover-item class="list-group-item" ng-repeat="item in items | filter: model" ng-click="choose(item['name'])">
                    <h4><span class="glyphicon glyphicon-map-marker"></span>{{item['name']}}</h4>
                    <p class="row" style="margin:20px;">
                        <span class="pull-left">{{item.label}}</span>
                        <span class="pull-right">{{item['name']}}-{{item['pinyin']}}-{{item['zip']}}</span>
                    </p>
                </a>
            </div>
        </div>
</script>

<script>
    var app = angular.module('MyAPP',[]);
    app.factory('CityService',function($http){
        return {
            getCityList:$http({method:'GET',url:'./data/citys.json'}) //这里没有写服务端，所以只是用了JSON文件封装模拟数据
        };
    });

    /**
     * 控制器
     * */
    app.controller('MyCtrl',function(CityService,$scope){
        CityService.getCityList.then(function(res){
            $scope.citys = res.data;
            console.log($scope.citys);
        });
        $scope.keyword=undefined;
        $scope.chooseCallback = function(name){
            //console.log('选中了'+name);
            $scope.result=name;
        }
    });

    /**
     * 自定义自动补全指令
     * */
    app.directive('autocomplete',function($timeout){
        return {
            restrict:'EA',
            templateUrl:'mytemplate',
            scope:{
                items:'=',
                model:'=',
                def:'@defaultValue',
                choosed:'&'
            },
            link:function(scope,iele,iattr){
                scope.ifChooseShow = false;
                scope.choose = function(name){
                    scope.model = name;
                    scope.ifChooseShow = false;
                    scope.choosed({name:scope.model});
                }
            }
        }
    });

    /**
     * 指令：鼠标划过元素时效果
     */
    app.directive('hoverItem',function(){
        return {
            restrict:'EA',
            link:function(scope,iele,iattr){
                iele.bind('mouseenter',function(){
                    iele.addClass('active')
                });
                iele.bind('mouseleave',function(){
                    iele.removeClass('active')
                })
            }
        }
    });
</script>

